<template>
  <!-- 查询栏 -->
  <div class="query">
    <QueryForm :form="form" v-model="queryData" @handleQuery="handleQuery" />
  </div>
  <!-- 表单栏 -->
  <div class="table">
    <BaseTable
      v-loading="tableLoading"
      :columns="columns"
      :data="dataList"
      :pager="pager"
      @handleCurrentChange="handleCurrentChange"
      @handleAction="handleAction"
    >
    </BaseTable>
    <!-- 弹窗 -->
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { getMemberList, memberEdit } from "@/api/member";
import { ElMessage } from "element-plus";
// 参数
const pager = reactive({
  page: 1,
  limit: 10,
  total: 0,
});

// 生成查询form结构数据
const form = [
  {
    type: "input",
    label: "用户昵称",
    model: "nick_name",
    placeholder: "请输入会员昵称",
  },
];

// 表单loading
const tableLoading = ref(false);

// 初始化用户表单对象
const queryData = ref(<any>{ status: null });

// 定义动态表格的格式
const columns = reactive([
  {
    label: "用户昵称",
    prop: "nick_name",
  },
  {
    type: "img",
    label: "用户头像",
    prop: "avatar",
  },
  {
    label: "手机号",
    prop: "mobile",
  },
  {
    label: "邮箱",
    prop: "email",
  },
  {
    label: "会员等级",
    prop: "level_id",
  },
  {
    type: "tag",
    label: "状态",
    prop: "status",
    formatter: (row: any, column: any, value: number) => {
      return {
        0: "封禁",
        1: "正常",
      }[value];
    },
    dict: { 0: "danger", 1: "success" },
  },
  {
    type: "switch",
    label: "封禁",
    prop: "status",
    checked: 1,
  },
  {
    label: "创建时间",
    prop: "created_time",
    width: 180,
  },
  {
    label: "更新时间",
    prop: "updated_time",
    width: 180,
  },
  {
    label: "最后登陆时间",
    prop: "last_login_time",
    width: 180,
  },
]);

// 渲染数据
const dataList = ref(<any>[]);

onMounted(() => {
  handleQuery();
});

// 查询
const handleQuery = async () => {
  tableLoading.value = true;
  let data = (await getMemberList({ ...pager, ...queryData.value })).data;
  dataList.value = data.rows;
  pager.total = data.count;
  tableLoading.value = false;
};

// 分页事件处理
const handleCurrentChange = (current: number) => {
  pager.page = current;
  handleQuery();
};

// 操作
const handleAction = async ({ text, row }: any) => {
  if (text === "封禁") {
    let status;
    if (row.status === 1) {
      status = 0;
    } else {
      status = 1;
    }
    await memberEdit({ id: row.id, status });
    ElMessage({ message: "上下架更新成功", type: "success" });
    handleQuery();
  }
};
</script>

<style lang="scss" scoped></style>
